<template>
  <view class="module-wrapper">
    <view class="wrapper-scroll-x">
      <scroll-view class="cust-tab-scroll" scroll-x="true" :scroll-left="scrollLeft">
        <view class="cust-tab-box">
          <view class="cust-tab-item" v-for="(item, index) in tabs" :key="item.icon" :class="{ 'active-tab': currentTab === index }" @click="switchTab(index)">
            <image class="tab-bg" :src="require(`@/static/images/monitor/${currentTab === index ? item.icon + '_sel' : item.icon + '_def'}.png`)" mode=""></image>
            <text class="tab-name">{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="monitor-content">
      <scroll-view scroll-y="true" class="scroll-y" :scroll-top="scrollTop" @scroll="onScroll">
      <dmhjVue v-if="currentTab == 0"></dmhjVue>
      <jxhjVue v-if="currentTab == 1"></jxhjVue>
      <jbzVue v-if="currentTab == 2"></jbzVue>
      <yfxtVue v-if="currentTab == 3"></yfxtVue>
      <tfxtVue v-if="currentTab == 4"></tfxtVue>
      <tsxtVue v-if="currentTab == 5"></tsxtVue>
      <xdxtVue v-if="currentTab == 6"></xdxtVue>
      <zwjcVue v-if="currentTab == 7"></zwjcVue>
      <gdxtVue v-if="currentTab == 8"></gdxtVue>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import dmhjVue from './components/dmhj.vue';
import jxhjVue from './components/jxhj.vue';
import jbzVue from './components/jbz.vue';
import yfxtVue from './components/yfxt.vue';
import tfxtVue from './components/tfxt.vue';
import tsxtVue from './components/tsxt.vue';
import xdxtVue from './components/xdxt.vue';
import zwjcVue from './components/zwjc.vue';
import gdxtVue from './components/gdxt.vue';

export default {
  components: {
    dmhjVue,
    jxhjVue,
    jbzVue,
    yfxtVue,
    tfxtVue,
    tsxtVue,
    xdxtVue,
    zwjcVue,
    gdxtVue
  },
  data() {
    return {
      scrollLeft: 0,
      scrollTop:0,
      tabs: [
        {
          name: '地面环境',
          icon: 'dmhj'
        },
        {
          name: '井下环境',
          icon: 'jxhj'
        },
        {
          name: '搅拌站',
          icon: 'jbz'
        },
        {
          name: '压风系统',
          icon: 'yfxt'
        },
        {
          name: '通风系统',
          icon: 'tfxt'
        },
        {
          name: '提升系统',
          icon: 'tsxt'
        },
        {
          name: '悬吊系统',
          icon: 'xdxt'
        },
        {
          name: '闸瓦检测',
          icon: 'zwjc'
        },
        {
          name: '供电系统',
          icon: 'gdxt'
        }
      ],
      currentTab: 0
    };
  },
  methods: {
    switchTab(inx) {
      this.scrollTop=0
      this.currentTab = inx;
    },
    onScroll(e){
      this.scrollTop = e.detail.scrollTop
    }
  }
};
</script>

<style lang="scss" scoped>
.module-wrapper {
  height: 100%;
  .wrapper-scroll-x {
    height: 190rpx;
    background: #3970ff;
    padding: 16rpx 0 20rpx 34rpx;
  }

  .monitor-content {
    margin-top: -20rpx;
    height: calc(100% - 170rpx);
    overflow-y: auto;
    
    .scroll-y {
      height: 100%;
    }
  }
}

.cust-tab-scroll {
}

.cust-tab-box {
  display: flex;

  .cust-tab-item {
    padding-right: 18rpx;
    position: relative;
    height: 134rpx;
  }

  .tab-bg {
    width: 160rpx;
    height: 120rpx;
  }
  .tab-name {
    width: calc(100% - 18rpx);
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    position: absolute;
    top: 70rpx;
    left: 0;
    text-align: center;
  }

  .active-tab {
    .tab-name {
      color: #2e7dff;
    }
    .tab-bg {
      height: 134rpx;
    }
  }
}

</style>
